import { h } from 'vue'
import { ElTag, ElIcon, ElButton, ElImage } from 'element-plus'
import * as ElementPlusIcons from '@element-plus/icons-vue'
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'

/**
 * 搜索条件配置
 */
export const searchConfig = [
  {
    field: 'title',
    label: '标题',
    component: 'Input',
    placeholder: '请输入标题',
    defaultValue: '',
  },
  {
    field: 'url',
    label: '链接',
    component: 'Input',
    placeholder: '请输入链接',
    defaultValue: '',
  },
  {
    field: 'type',
    label: '类型',
    component: 'Select',
    placeholder: '请选择类型',
    defaultValue: '',
    options: [
      { label: '个人作品', value: '0' },
      { label: '优秀站点', value: '1' },
      { label: '友情链接', value: '2' },
    ],
  },
  {
    field: 'status',
    label: '状态',
    component: 'Select',
    placeholder: '请选择状态',
    defaultValue: '',
    options: [
      { label: '启用', value: '1' },
      { label: '禁用', value: '0' },
    ],
  },
  {
    field: 'createTimeRange',
    label: '创建时间',
    component: 'DateRangePicker',
    defaultValue: [],
    props: {
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期',
      valueFormat: 'YYYY-MM-DD',
      type: 'daterange',
    },
  },
  {
    field: 'updateTimeRange',
    label: '修改时间',
    component: 'DateRangePicker',
    defaultValue: [],
    props: {
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期',
      valueFormat: 'YYYY-MM-DD',
      type: 'daterange',
    },
  },
]

/**
 * 表格列配置
 */
export const tableConfig = [
  {
    type: 'selection',
    width: 55,
    fixed: 'left',
    align: 'center',
  },
  {
    type: 'index',
    width: 55,
    label: '序号',
    align: 'center',
  },
  {
    prop: 'icon',
    label: '图标/封面',
    width: 100,
    align: 'center',
    render: (row) => {
      const imageUrl = row.icon || row.coverImage
      return imageUrl
        ? h(ElImage, {
            src: imageUrl,
            style: {
              width: '50px',
              height: '50px',
              borderRadius: '4px',
              cursor: 'pointer',
            },
            fit: 'cover',
            previewSrcList: [imageUrl],
            initialIndex: 0,
            hideOnClickModal: true,
            previewTeleported: true,
            zIndex: 3000,
            previewProps: {
              closeOnPressEscape: true,
              teleported: true,
              style: {
                '--el-image-viewer-mask-color': 'rgba(0, 0, 0, 0.8)',
              },
            },
            error: () =>
              h(
                'div',
                {
                  style: {
                    width: '100%',
                    height: '100%',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    backgroundColor: 'var(--el-fill-color-light)',
                    color: 'var(--el-text-color-secondary)',
                    fontSize: '12px',
                  },
                },
                '加载失败',
              ),
          })
        : '-'
    },
  },
  {
    prop: 'title',
    label: '名称/标题',
    minWidth: 180,
    align: 'center',
  },
  {
    prop: 'url',
    label: '链接',
    minWidth: 200,
    align: 'center',
    showOverflowTooltip: true,
    render: (row) => {
      return h(
        'a',
        {
          href: row.url,
          target: '_blank',
          style: {
            color: 'var(--el-color-primary)',
            textDecoration: 'none',
          },
          onMouseover: (e) => {
            e.target.style.textDecoration = 'underline'
          },
          onMouseout: (e) => {
            e.target.style.textDecoration = 'none'
          },
        },
        row.url,
      )
    },
  },
  {
    prop: 'type',
    label: '类型',
    width: 100,
    align: 'center',
    render: (row) => {
      const typeMap = {
        0: { label: '个人作品', type: 'primary' },
        1: { label: '优秀站点', type: 'success' },
        2: { label: '友情链接', type: 'info' },
      }
      const typeInfo = typeMap[row.type] || { label: '未知', type: 'info' }
      return h(ElTag, { type: typeInfo.type }, () => typeInfo.label)
    },
  },
  {
    prop: 'orderNum',
    label: '排序',
    width: 120,
    align: 'center',
    render: (row) =>
      h(
        'div',
        {
          style: {
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: '4px',
          },
        },
        [
          h(
            ElButton,
            {
              size: 'small',
              type: 'primary',
              link: true,
              disabled: row.upDisabled,
              onClick: (e) => {
                e.stopPropagation()
                row.onMoveUp?.(row)
              },
            },
            () => h(ElIcon, null, () => h(ArrowUp)),
          ),
          h(
            'span',
            {
              style: {
                margin: '0 8px',
                minWidth: '40px',
                textAlign: 'center',
              },
            },
            row.orderNum,
          ),
          h(
            ElButton,
            {
              size: 'small',
              type: 'primary',
              link: true,
              onClick: (e) => {
                e.stopPropagation()
                row.onMoveDown?.(row)
              },
            },
            () => h(ElIcon, null, () => h(ArrowDown)),
          ),
        ],
      ),
  },
  {
    prop: 'status',
    label: '状态',
    width: 100,
    align: 'center',
    render: (row) =>
      h(
        ElTag,
        {
          type: row.status === '1' ? 'success' : 'danger',
        },
        () => (row.status === '1' ? '启用' : '禁用'),
      ),
  },
  {
    prop: 'createOn',
    label: '创建时间',
    minWidth: 180,
    align: 'center',
    render: (row) => {
      if (!row.createOn) return '-'
      const date = new Date(row.createOn)
      return date
        .toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false,
        })
        .replace(/\//g, '-')
    },
  },
  {
    prop: 'updateOn',
    label: '修改时间',
    minWidth: 180,
    align: 'center',
    render: (row) => {
      if (!row.updateOn) return '-'
      const date = new Date(row.updateOn)
      return date
        .toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false,
        })
        .replace(/\//g, '-')
    },
  },
]

/**
 * 操作按钮配置
 */
export const operateConfig = {
  add: {
    text: '新增链接',
    icon: 'Plus',
    type: 'primary',
  },
}
